@import "./sidebar";
@import "./reset";
@import "./dark";
@font-face {
  font-family: 'titlename';
  src: url('font/PangMenZhengDao-3-Reg.ttf');
}
 
:root {
  //新增
  --colornew: #4e6a7c;
  --colorlightright:#87a0ab;
  --loginicon: #cfeeff;
  --combgcolor:rgba(255,255,255,.5);
  --cmbg3:rgba(255,255,255,.3);
  //--mb20:10px!important;
  //修改  
  --el-menu-item-height: 66px!important; 
 
}
body { 
   background-image: url("../assets/index/1920bg.jpg");
   background-size: cover; 
   height: 100%;
   background-repeat: no-repeat;
   background-attachment: fixed;
   min-width: 1200px!important;
  width: 100%;
  overflow: auto; 
}
 
.app-main{
  background-color: transparent!important;
  padding: 20px 26px 30px 20px;
}
.app-container {
  padding: 10px;
}
.search-container {
  padding: 18px 0 0 10px;
  margin-bottom: 10px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
.text-newcolor{
  color: var(--colornew);
}
.copyright{
  color: var(--colorlightright);
}
.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32 160 255);
  }
}

.el-card,.el-tabs--border-card {  
  //backdrop-filter: blur(10px);使用会导致弹出层框线在局部区域 
  background-color: var(--combgcolor)!important;
  border: 1px solid #829dba!important;
  --el-card-border-radius: 10px!important;
  //margin-bottom: var(--mb20)!important; 
  box-shadow: 8px 9px 0px 0px rgba(128,150,167,.35)!important;
}
.el-tabs--border-card{
  border-radius: 10px;
}
.bg-gray-800 {
    //background-color: #4a6982!important;
   background-color:#2181a2 !important;
}
.w-5{
   width: 2.55rem!important;
}
.h-5{ 
  height: 2.55rem!important;
}
.margint10{
  margin-top: 10px;
}
.margint20{
  margin-top: 20px;
}
.marginb20{
  margin-bottom: 20px;
}
.el-menu--vertical { 
    border-left: #2181a2 1px dashed!important; 
} 
.el-menu-item.is-active{
  background: #3e9fc0;
  .svg-icon { 
      color: #fff;
    }
}
.el-menu{
  .svg-icon { 
      width: 2.2em !important;
      height: 2.2em !important;
      color: #2181a2;
    }
} 
.hideSidebar .fixed-header{
	width: calc(100% - 74px)!important;
}
.app .sidebar-container.has-logo .el-scrollbar { 
  border-left: #2181a2 5px solid!important; 
}
.navbar{
    //background-color: #4a6982!important; 
    background-color:var(--combgcolor)!important;
    backdrop-filter: blur(10px); 
}
 .tags-container{
    //background-color: #4a6982!important; 
    //background-color:rgba(255,255,255,.1)!important; 
}
.tags-container { 
  height: 50px;
  background-color: rgba(75,174,208,.3)!important; 
  border-bottom: 1px solid #829dba;
  box-shadow: 0 1px 1px var(--el-box-shadow-light);
  padding-top: 10px;

  .tags-item {
    display: inline-block;
    padding: 10px 16px;
    margin: 0px 0 0 12px;
    //  padding: 3px 8px;
    // margin: 4px 0 0 5px;
    font-size: 14px;
    cursor: pointer;
    //border: 1px solid #829dba;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
   // background: rgba(255,255,255,.3);
    backdrop-filter: blur(10px); 
    background-color: #4baed0;
    border: 1px solid #4baed0;
    color:#fff;
 

    &:first-of-type {
      margin-left: 15px;
    }

    &:last-of-type {
      margin-right: 15px;
    }

    &:hover {
      color: #2a7088;
      background-color: rgba(255,255,255,.5);
      border: 1px solid rgba(255,255,255,.5);
    }

    &.active {
      color: #fff; 

      &::before {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 5px;
        content: "";
        background: #fff;
        border-radius: 50%;
      }
    }

    &-close {
      border-radius: 100%;

      &:hover {
        color: #fff;
        background: #4baed0;
      }
    }
  }
}
.tags-container .tags-item.active { 
    background-color: #2181a2 !important;;
    border-color: #2181a2 !important;;
}
.tag-menu {
  position: absolute;
  z-index: 99;
  font-size: 12px;
  background: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);

  li {
    padding: 8px 16px;
    cursor: pointer;

    &:hover {
      background: var(--el-fill-color-light);
    }
  }
}
.btnshadow{
  border-top-left-radius: 15px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 15px;
    box-shadow: 0px 3px 3px 0px rgba(81,122,167,0.3);
    border-width: 3px;
    height: 42px;
}
.height32{
  height: 32px!important;
}
.s30{
  width: 30px!important;
  height: 30px!important;
  margin-right: 10px;
  
}
 .el-text{
  display: flex; align-items: center;
 }
 .el-scrollbar__bar.is-horizontal {
  height: 10px!important;
}
.el-scrollbar__bar.is-vertical {
  width: 10px!important;
}
.el-scrollbar__thumb{
  background-color:rgb(54 90 129 / 62%) !important;
}

.el-table{
  background-color: transparent!important;
}
 .el-table__header{
  th{    
    background: #cddee9b9!important;
    color: #000;
  }
 }
 .el-table tr {
  background-color: rgba(255,255,255,.5)!important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: rgba(215, 229, 238, 0.19) !important;
}
.lineheight30{
  line-height: 30px;
}
.el-tag{
  cursor: pointer !important;
}
.el-dialog, .el-message-box{
  border-radius: 10px!important; 
  border: 1px solid #829dba!important;  
}
.el-step__icon { 
    width: 44px!important;
    height: 44px!important;
    font-size: 29px!important;
}
.el-transfer-panel,.el-tree { 
    background: var(--combgcolor)!important;
}
.el-step.is-horizontal .el-step__line { 
    top: 21px!important; 
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { 
  font-weight: bold;
}
.el-tabs--border-card>.el-tabs__header, .el-tabs__nav-wrap { 
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    color: #000!important;
    background-color: #d5e1e9!important;
}
.demo-tabs .el-tabs__content {
  padding: 15px 20px 15px 15px !important;
}
.tiptitle {
  display: flex;
  align-items: center; 
    padding: 0px 16px; 
    border-radius: 4px;
    border-bottom: 5px solid #c6cdd2;  
    font-weight: 700;
    color: #34495e;
    svg{
      width:25px!important;
      height: 25px!important;
      margin-right:12px; 
      margin-bottom:8px;
    } 
}
.borderleft{
  border-left: 2px dashed #dcdfe6;
  border-right: 2px dashed #dcdfe6;
  background: var(--combgcolor);
  box-shadow: 1px 2px 3px 3px rgba(128,150,167,.35)!important;
  border-radius: 10px;
 }
 .border{
  border: 1px solid #dcdfe6;
  padding:15px;
  border-radius: 10px;
  background-color: var(--combgcolor);
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
 
    background-color: #3e9fc0!important;
}
.demo-pagination-block{
  padding-top:10px;
}
